<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="common-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 信息项 -->
    <van-cell-group>
      <input
        type="file"
        ref="file"
        hidden
        accept="image/png"
        @change="onFileChange"
      />
      <van-cell
        center
        title="头像"
        value="内容"
        is-link
        @click="$refs['file'].click()"
      >
        <van-image
          width="36"
          height="36"
          round
          fit="cover"
          :src="userProfile.photo"
        />
      </van-cell>
      <van-cell
        title="昵称"
        :value="userProfile.name"
        is-link
        @click="isEditNameShow = true"
      />
      <van-cell
        title="性别"
        :value="userProfile.gender === 0 ? '男' : '女'"
        is-link
        @click="isEditGenderShow = true"
      />
      <van-cell
        title="生日"
        :value="userProfile.birthday"
        is-link
        @click="isEditBirthdayShow = true"
      />
    </van-cell-group>

    <!-- 昵称编辑弹出层 -->
    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <com-update-name
        v-if="isEditNameShow"
        v-model="userProfile.name"
        @close="isEditNameShow = false"
      />
    </van-popup>

    <!-- 性别编辑弹出层 -->
    <van-popup v-model="isEditGenderShow" position="bottom">
      <com-update-gender
        v-if="isEditGenderShow"
        v-model="userProfile.gender"
        @close="isEditGenderShow = false"
      />
    </van-popup>

    <!-- 生日编辑弹出层 -->
    <van-popup v-model="isEditBirthdayShow" position="bottom">
      <com-update-birthday
        v-if="isEditBirthdayShow"
        v-model="userProfile.birthday"
        @close="isEditBirthdayShow = false"
      />
    </van-popup>

    <!-- 头像编辑弹出层 -->
    <van-popup
      class="update-avatar-popup"
      v-model="isEditAvatarShow"
      position="bottom"
      style="height:100%"
    >
      <com-update-avatar
        v-if="isEditAvatarShow"
        :file="file"
        @close="isEditAvatarShow = false"
        @update-success="userProfile.photo"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import ComUpdateName from './components/com-update-name'
import ComUpdateGender from './components/com-update-gender'
import ComUpdateBirthday from './components/com-update-birthday'
import ComUpdateAvatar from './components/com-update-avatar'
export default {
  name: 'UserProfile',
  components: {
    ComUpdateName,
    ComUpdateGender,
    ComUpdateBirthday,
    ComUpdateAvatar
  },
  data() {
    return {
      userProfile: {},
      isEditNameShow: false,
      isEditGenderShow: false,
      isEditBirthdayShow: false,
      isEditAvatarShow: false,
      fileBlob: ''
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const { data } = await getUserProfile()
      // console.log(data)
      this.userProfile = data.data
    },
    onFileChange() {
      // 展示弹出层
      this.isEditAvatarShow = true
      // 预览图片
      // 通过 blob 创建文件路径信息
      // const blob = window.URL.createObjectURL(this.$refs.file.files[0])

      this.file = this.$refs.file.files[0]
      // 为了解决相同文件不触发 change 时间，所以在这里手动的情况 file 的 value
      this.$refs.file.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.update-avatar-popup {
  background-color: #000000;
}
</style>
